<template>
	<div class="container">
		<span style="font-size: 30px; font-weight: 600">选择宿舍</span>
		<el-card style="max-width: 100%; margin-top: 10px; height: 150px">
			<el-row>
				<el-col :span="2">
					<p style="color: #4b80b7">选择宿舍</p>
				</el-col>
				<el-col :span="22">
					<el-select v-model="Inputvalue" clearable placeholder="选择楼栋" style="width: 240px; margin-top: 10px">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</el-col>
			</el-row>

			<el-row style="margin-top: 16px">
				<el-col :span="15">
					<el-input v-model="input2" style="width: 440px" placeholder="输入宿舍号" />
					<el-button type="primary" style="margin-left: 20px" @click="Search">搜索</el-button>
				</el-col>
				<el-col :span="9">
					<el-button type="primary" @click="add">添加</el-button>
					<!-- <el-button type="danger" @click="del">删除</el-button> -->
					<el-button type="success" @click="edit">修改</el-button>
				</el-col>
			</el-row>
		</el-card>

		<div class="table">
			<span style="font-size: 30px; font-weight: 600">详细信息</span>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column fixed prop="date" label="Date" width="150" />
				<el-table-column prop="name" label="Name" width="120" />
				<el-table-column prop="state" label="State" width="120" />
				<el-table-column prop="city" label="City" width="120" />
				<el-table-column prop="address" label="Address" width="600" />
				<el-table-column prop="zip" label="Zip" width="120" />
				<el-table-column fixed="right" label="Operations" width="120">
					<template #default>
						<el-button link type="primary" size="small" @click="handleClick"> Detail </el-button>
						<el-button link type="primary" size="small">Edit</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<CustomModal :show="show" @giveFather="getValue" :title="title"></CustomModal>
	</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const input2 = ref("");
import { selectStudent, delStudent } from "@/api/admin/home";
// 模态框组件
import CustomModal from "./component/CustomModal.vue";
const list = ref([]);
const userList = ref([]);
const title = ref("");
const show = ref(false);
const Inputvalue = ref("");
const options = [
	{
		label: "龙门客栈",
		value: "龙门客栈",
		id: "538150-546-a237-3f21-f6ec3cec3ab1"
	},
	{
		label: "博贤楼",
		value: "博贤楼",
		id: "538150-546-a237-3f21-f6ec3cec3ab0"
	}
];
// 获取数据
onMounted(() => {
	getStudent();
});
const getStudent = async () => {
	// const res = await selectStudent();
	try {
		const res = await selectStudent();
		if (res.data.code === 200) {
			userList.value = res.data.data;
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
const Search = async () => {
	// 非空校验
	if (!input2.value || !Inputvalue.value) {
		ElMessage({
			message: "寝室号或楼栋信息为空",
			type: "error"
		});
		return;
	}
	if (userList.value.length > 0) {
		let arr = [];
		userList.value.forEach(it => {
			if (it.username.includes(input2.value) || it.studentcard.includes(input2.value)) {
				arr.push(it);
			}
		});
		if (arr.length > 0) {
			ElMessage({
				message: "搜索成功",
				type: "success"
			});
			list.value = arr;
		} else {
			ElMessage({
				message: "暂未该学生信息",
				type: "error"
			});
		}
	} else {
		ElMessage({
			message: "暂未该学生信息",
			type: "error"
		});
		return;
	}
};
// 增加学生
const add = () => {
	title.value = "增加学生信息";
	show.value = true;
};
// 修改
const edit = () => {
	title.value = "编辑学生信息";
	show.value = true;
};
//删除
const del = async () => {
	// console.log(list.value)
	if (list.value.length === 0) {
		ElNotification({
			message: "学生信息为空 ",
			type: "error",
			duration: 3000
		});
		return;
	}
	// console.log(list.value[0].student_id);

	let arr = list.value.map(it => it.student_id);
	const res = await delStudent(arr);
	if (res.data.code === 200) {
		ElNotification({
			message: "删除成功 ",
			type: "success",
			duration: 3000
		});
		list.value = [];
	} else {
		ElNotification({
			message: "删除失败 ",
			type: "error",
			duration: 3000
		});
	}
};
const getValue = e => {
	show.value = e;
};
</script>

<style scoped lang="scss">
.container {
	width: 95%;
	height: 100%;
	margin: 20px;

	.table {
		margin-top: 20px;
		.build {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
	}
}
</style>
